<script setup lang="ts">
import {computed} from "vue";
import {useAppConfigStore} from "@/store/system/appConfigStore";

const webName = computed(() => useAppConfigStore().getWebName)
const recordNum = computed(() => useAppConfigStore().recordNum)
const securityRecordNum = computed(() => useAppConfigStore().securityRecordNum)
</script>

<template>
  <div class="footer-bottom flex justify-between flex-wrap">
    <div class="footer-info flex-none icon-copyright">
      {{ webName }}版权所有 · 架构于 Vite / Vue3
    </div>
    <div class="site-link flex flex-wrap content-center" style="gap: 1em;">
      <a v-if="recordNum" role="button" target="_blank" class="mitt flex cursor-pointer"
         href="https://beian.miit.gov.cn/">{{ recordNum }}</a>
      <a v-if="securityRecordNum" role="button" target="_blank" class="police flex cursor-pointer"
         href="https://www.beian.gov.cn/portal/registerSystemInfo">{{ securityRecordNum }}</a>
    </div>
  </div>
</template>

<style lang="less" scoped>
.footer-bottom {
  gap: var(--gap-span);
  padding: var(--gap-divs) var(--edge-lr);
  background: var(--h-bg);
  box-shadow: var(--box-shadow);
}

.footer-info {
  opacity: .5;
}

.site-link a:before {
  content: "";
  height: 1.5em;
  width: 1.5em;
}

.site-link .mitt:before {
  background: url(@/assets/footer/icpb.png) 50% / contain;
}

.site-link .police:before {
  background: url(@/assets/footer/gawb.png) 50% / contain;
}

.site-link a {
  filter: grayscale(1) opacity(.5);
  flex-flow: nowrap row;
  align-items: center;
  white-space: nowrap;
  gap: 0 .3em;
  line-height: 1;
  background: none;
}

.site-link a:hover {
  filter: grayscale(0) opacity(1);
}
</style>
